<template>
    <div class="div">
        <div class="top">
            <span @click="byRecom" class="topc">综合推荐</span>
            <span @click="bySales" class="topc">销量</span>
            <span @click="byPrice" class="topc">价格</span>
        </div>
        <div>
            <nut-infiniteloading
                    @loadmore="onInfinite"
                    :is-show-mod="true"
                    :has-more="isHasMore"
                    :is-loading="isLoading"
                    :threshold="200"
            >
                <ul class="list" >
                    <li class="list-item" v-for="(item, index) in data" :key="index" @click="toDetail(item.id)">
                        <img :src="item.goodsimage"/>
                        <p>
                            <span>{{item.goodstitle}}</span><br/>
                            <span>¥{{item.goodsprice}}</span><br/>
                            <span>{{index}}条评论</span>
                        </p>
                    </li>
                </ul>
            </nut-infiniteloading>
        </div>
        <!--返回顶部-->
        <nut-backtop :distance="600"></nut-backtop>
    </div>
</template>

<script>
    export default {
        name: "afterSearch",
        data() {
            return {
                show:false,
                data: new Array(0),
                page: 0,
                num: 10,
                isHasMore: true,
                isLoading: false,
                isErr: false,
                timer: null,
                end:false
            };
        },
        methods: {
            onInfinite () {
                this.isLoading = true;
                this.timer = setTimeout(() => {
                    if(!this.searchValue()){
                        this.page += 1;
                    }else{
                        this.isHasMore = false;
                    }
                    this.isLoading = false;
                }, 100);
            },
            byRecom(){
                console.log("综合推荐")
                this.show =true;
            },
            bySales(){
                console.log("销量")
            },
            byPrice(){
                console.log("价格")
            },
            searchValue(){
                var param = new URLSearchParams();
                param.append('Search',this.search);
                param.append('offset',this.page*this.num );
                param.append('limit',this.num);
                this.$axios.post('/goods/selectBySearch',param).then(
                    res => {
                        if(res.data.code == 200){
                            if(res.data.data.length==0){
                                this.end = true;
                            }
                            this.data = this.data.concat(res.data.data);
                        }
                    }
                );
                return this.end;
            },
            toDetail(id){
                this.$router.push({name:'goodsinfo',query:{'goodsId':id}});
            }
        },
        destroyed() {
            clearTimeout(this.timer);
        },
        props:['search'],
        mounted() {
            this.searchValue();
        },

    }
</script>

<style scoped>
    .div{
        width:100vw;
        overflow: hidden;
        margin:0px;
        padding:0px;
    }
    .top{
        width:100vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        background: #ffffff;
    }
    .topc{
        line-height: 2.5em;
    }
    .list{
        background: #ffffff;
        list-style: none;
        padding:10px 0px;
    }
    .list-item{
        display: flex;
        width: 94%;
        height: 120px;
        background: #ffffff;
        margin:8px auto;
    }
    .list-item img{
        width: 120px;
        height: 120px;
        border-radius: 10px;
        margin-right: 10px;
    }
    .list-item>p{
        width:60%;
    }
    .list-item p span:nth-child(1){
        width:100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: -15px;
    }
</style>
